<template>
  <div class="home-container">
    <!-- 顶部数据卡片区域 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="(item, index) in cardData" :key="index">
        <el-card shadow="hover" class="data-card">
          <div class="card-header">
            <i :class="item.icon"></i>
            <div class="card-info">
              <div class="card-title">{{ item.title }}</div>
              <div class="card-value">{{ item.value }}</div>
            </div>
          </div>
<!--          <div class="card-footer">-->
<!--            <span>{{ item.footer }}</span>-->
<!--            <span :class="{'up': item.isUp, 'down': !item.isUp}">-->
<!--              {{ item.change }}%-->
<!--              <i :class="item.isUp ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>-->
<!--            </span>-->
<!--          </div>-->
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="chart-card">
          <div slot="header">
            <span>销售趋势</span>
          </div>
          <line-chart :chart-data="salesChartData" height="400px"/>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="24">
        <el-card class="chart-card">
          <div slot="header">
            <span>文章发布趋势</span>
          </div>
          <line-chart :chart-data="articleChartData" height="400px"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineChart from './dashboard/LineChart'
import {getOrdersPublishTrend,getOrdersCount,getPriceCount} from "../api/orders/orders";
import {getArticlePublishTrend,getArticleCount} from "../api/article/article";
import {getUsersCount} from "../api/system/user";

export default {
  name: 'Home',
  components: {
    LineChart
  },
  created() {
    getOrdersPublishTrend().then(res => {
      const processedData = this.processSalesData(this.salesChartData, res);
      console.log(processedData)
    })
    getArticlePublishTrend().then(res => {
      const processedData = this.processSalesDatas(this.articleChartData, res);
      console.log(processedData)
    })
    getArticleCount().then(res => {
      this.cardData[3].value = res.data;
    })
    getOrdersCount().then(res => {
      this.cardData[2].value = res.data;
    })
    getPriceCount().then(res => {
      this.cardData[0].value = "¥"+res.data;
    })
    getUsersCount().then(res => {
      this.cardData[1].value = res.data;
    })
  },
  data() {
    return {
      cardData: [
        {
          title: '总销售额',
          value: '¥126,560',
          footer: '日同比',
          change: 12.5,
          isUp: true,
          icon: 'el-icon-money'
        },
        {
          title: '访问量',
          value: '88,754',
          footer: '周同比',
          change: 8.2,
          isUp: true,
          icon: 'el-icon-view'
        },
        {
          title: '订单量',
          value: '6,450',
          footer: '日环比',
          change: 2.8,
          isUp: false,
          icon: 'el-icon-shopping-cart-full'
        },
        {
          title: '文章数量',
          value: '2,156',
          isUp: true,
        }
      ],
      salesChartData: {
        labels: [],
        datasets: [
          {
            label: '销售趋势',
            data: [],
            smooth: true,
            lineStyle: {
              width: 3
            },
            itemStyle: {
              color: '#409EFF'
            }
          }
        ]
      },
      articleChartData: {
        labels: [],
        datasets: [
          {
            label: '文章发布',
            data: [],
            smooth: true,
            lineStyle: {
              width: 3
            },
            itemStyle: {
              color: '#F56C6C'
            }
          }
        ]
      }
    }
  },
  methods: {
    // 处理后端返回的数据
    processSalesData(salesChartData, res) {
      // 遍历后端返回的数据
      res.data.forEach(item => {
        const date = new Date(item.date);
        const dayOfWeek = date.getDay();
        // 将 date 放入 labels 中
        salesChartData.labels.push("周"+dayOfWeek);
        // 将 totalPrice 放入 data 中
        salesChartData.datasets[0].data.push(item.totalPrice);
      });
      return salesChartData;
    },

    processSalesDatas(salesChartData, res) {
      // 遍历后端返回的数据
      res.data.forEach(item => {
        const date = new Date(item.date);
        const dayOfWeek = date.getDay();
        // 将 date 放入 labels 中
        salesChartData.labels.push("周"+dayOfWeek);
        // 将 totalPrice 放入 data 中
        salesChartData.datasets[0].data.push(item.articleCount);
      });
      return salesChartData;
    }

  }
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: 100vh;

  .data-card {
    margin-bottom: 20px;

    .card-header {
      display: flex;
      align-items: center;

      i {
        font-size: 48px;
        color: #409EFF;
        margin-right: 16px;
      }

      .card-info {
        .card-title {
          font-size: 14px;
          color: #909399;
        }

        .card-value {
          font-size: 24px;
          font-weight: bold;
          margin-top: 4px;
        }
      }
    }

    .card-footer {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      color: #909399;
      font-size: 14px;

      .up {
        color: #67C23A;
      }

      .down {
        color: #F56C6C;
      }
    }
  }

  .chart-row {
    margin-bottom: 20px;

    .chart-card {
      margin-bottom: 0;

      .el-card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
      }

      .el-card__body {
        padding: 20px;
      }
    }
  }
}
</style>
